<template>
  <Rheaders />
  <div>
    <div class="con">
      <div class="main">
        <r-logo class="logo" />
        <div>
          <div class="text">用户名</div>
          <input class="input" v-on:blur="resname(user_name)" type="text" v-model="user_name" placeholder=""
            maxlength="14" />
          <div class="text">密码</div>
          <input class="input" href="javascript:viod(0)" @blur="respassword(password)" type="text" password="true"
            v-model="password" placeholder="" maxlength="14" />
        </div>
        <div class="button">
          <div class="btlogin" @tap="login()">登录</div>
          <div class="btlogin" @tap="register()">注册</div>
        </div>
        <div class="password">找回密码</div>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
import Rheaders from "../home/Rheaders.vue"
export default {
  name: "signins",
  data() {
    return {
    }
  },
  props: {
    //disabled: Boolean,
    //id: {
    //  type: Number,
    //  default: 0
    //},
  },
  // 计算属性，有依赖其它属性时，且其它属性没有发生变化，计算属性将不会重新计算而使用缓存
  computed: {
    // 仅读取
    //aDouble: function () { return this.a * 2 },
    // 读取和设置
    //aPlus: {
    //  get: function () { return this.a + 1 },
    //  set: function (v) { this.a = v - 1 }
    //}
  },
  methods: {
    //plus: function () { this.a++ },
  },
  watch: {
    //a: function (value, old) { },
  },
  mounted() {
  },
  components: {
    Rheaders
  }
}
</script>

<style lang="scss" scoped>
.con {
  display: flex;
  flex-direction: column;
  padding-top: 100px;
  align-items: center;
  justify-content: center;

}

.main {
  // border: 6px solid #090000;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  background-color: #032850;
  backdrop-filter: blur(3px);
  filter: drop-shadow(5px 5px 10px #000000);
  align-items: center;
  justify-content: center;
}

.logo {
  filter: drop-shadow(15px 10px 5px black);
  margin-top: 50px;
  margin-bottom: 40px;
}

.text {
  color: white;
}

.input {
  position: relative;
  padding: 2px 2px 2px 2px;
  width: 300px;
  height: 50px;
  margin-bottom: 20px;
  font-size: 20px;
  border: 2px solid #fafafa;
  border-radius: 10px;
  background-color: transparent;
  outline: none;
  flex: 1;
  color: white;
  transition: all 0.5s;
}

.input:focus {
  box-shadow: 0 0 5px #03e9f4, 0 0 10px #03e9f4, 0 0 25px #03e9f4,
}

.button {
  display: flex;
  flex-direction: row;
  color: #ffffff;
}

.btlogin {
  background: #0e5271;
  border-radius: 10px;
  margin: 40px 20px;
  padding: 5px;
  width: 100px;
  height: 30px;
  text-align: center;
  text-decoration: none;
  transition: all 0.5s;
}

.btlogin:hover {
  background-color: #03e9f4;
  box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4,
}

.password {
  color: #ffffff;
  margin-bottom: 10px;
}
</style>